Creating Bar Chart

A bar chart is extensively used to illustrate comparisons between individual items or categories.

The data arranged in columns or rows of a worksheet can be plotted in a bar chart. In bar charts, the categories are organized along the vertical axis with the data values along the horizontal axis.

SpreadJS supports the following types of bar charts. In the examples shown below, the annual sales record for Quarter 1, Quarter 2 and Quarter 3 for different categories of gadgets: Mobile Phones, Laptops and Tablets is depicted in different types of bar charts.

Clustered Bar Chart
A clustered bar chart displays the comparisons of values across different categories.

An image of a clustered bar chart is shown below:
Stacked Bar Chart
A stacked bar chart displays the relationship of each item/category to the whole in two-dimensional and three-dimensional rectangles.

An image of a stacked bar chart is shown below:
100% Stacked Bar Chart
A 100% stacked bar chart displays the comparisons of percentage that each of the values contribute to the total across different categories.

An image of a 100% stacked bar chart is shown below:

Using Code

This code shows how to add different types of bar charts in a spreadsheet.

JavaScript	Copy Code
var chart_barClustered, chart_barStacked, chart_barStacked100, sheet; window.onload = function () { var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss")); sheet = spread.getActiveSheet(); sheet.suspendPaint(); //prepare data for chart sheet.setValue(0, 1, "Q1"); sheet.setValue(0, 2, "Q2"); sheet.setValue(0, 3, "Q3"); sheet.setValue(1, 0, "Mobile Phones"); sheet.setValue(2, 0, "Laptops"); sheet.setValue(3, 0, "Tablets"); for (var r = 1; r <= 3; r++) { for (var c = 1; c <= 3; c++) { sheet.setValue(r, c, parseInt(Math.random() * 100)); } } //add barClustered chart chart_barClustered = sheet.charts.add('chart_barClustered', GC.Spread.Sheets.Charts.ChartType.barClustered, 250, 20, 600, 400, "A1:D4"); //add barStacked chart chart_barStacked = sheet.charts.add('chart_barStacked', GC.Spread.Sheets.Charts.ChartType.barStacked, 250, 480, 600, 400, "A1:D4"); //add barStacked100 chart chart_barStacked100 = sheet.charts.add('chart_barStacked100', GC.Spread.Sheets.Charts.ChartType.barStacked100, 250, 900, 600, 400, "A1:D4"); sheet.resumePaint(); };

JavaScript

Copy Code

var chart_barClustered, chart_barStacked, chart_barStacked100, sheet;

        window.onload = function () {
            var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"));
            sheet = spread.getActiveSheet();
            sheet.suspendPaint();

            //prepare data for chart
            sheet.setValue(0, 1, "Q1");
            sheet.setValue(0, 2, "Q2");
            sheet.setValue(0, 3, "Q3");
            sheet.setValue(1, 0, "Mobile Phones");
            sheet.setValue(2, 0, "Laptops");
            sheet.setValue(3, 0, "Tablets");
            for (var r = 1; r <= 3; r++) {
                for (var c = 1; c <= 3; c++) {
                    sheet.setValue(r, c, parseInt(Math.random() * 100));
                }
            }

//add barClustered chart
chart_barClustered = sheet.charts.add('chart_barClustered', GC.Spread.Sheets.Charts.ChartType.barClustered, 250, 20, 600, 400, "A1:D4");

//add barStacked chart
chart_barStacked = sheet.charts.add('chart_barStacked', GC.Spread.Sheets.Charts.ChartType.barStacked, 250, 480, 600, 400, "A1:D4");

//add barStacked100 chart
chart_barStacked100 = sheet.charts.add('chart_barStacked100', GC.Spread.Sheets.Charts.ChartType.barStacked100, 250, 900, 600, 400, "A1:D4");

sheet.resumePaint();
};